@import '../../../themes/mixins/error-message';

.component {
  margin-bottom: 20px;
  position: relative;

  .disabled {
    background-color: var(--theme-input-background-color);
    border-color: var(--theme-input-border-color);
    color: var(--theme-input-text-color);
  }

  &:hover {
    .editButton {
      opacity: 1;
    }
  }

  &.inactive {
    &:hover {
      input {
        cursor: pointer;
      }
    }
  }

  &.readOnly {
    input:read-only {
      background: var(--rp-input-bg-color-disabled);
      border: none;
    }

    &:hover {
      input {
        cursor: text;
      }
    }
  }

  &.oneButton {
    :global {
      input {
        padding-right: 49px;
      }
    }
  }

  &.twoButtons {
    :global {
      input {
        padding-right: 88px;
      }
    }
  }

  .buttonsWrapper {
    cursor: text;
    height: 28px;
    margin-right: 11px;
    position: absolute;
    right: 1px;
    top: 42px;
  }

  .button {
    background-color: var(--theme-button-flat-background-color);
    border-radius: 3px;
    cursor: pointer;
    height: 28px;
    width: 28px;

    &:hover {
      background-color: var(--theme-button-flat-background-color-hover);
    }

    &:active {
      background-color: var(--theme-button-flat-background-color-active);
    }

    span {
      align-items: center;
      align-self: center;
      display: flex;
      flex: 1;
      height: 100%;
      justify-content: center;
      justify-self: center;
    }

    .icon {
      svg {
        max-height: 10px;
        max-width: 10px;
      }
    }
  }

  .editButton {
    opacity: 0;
    transition: opacity 0.25s;

    &:hover {
      opacity: 1;
    }

    .icon {
      svg path {
        stroke: var(--theme-button-flat-text-color);
      }
    }
  }

  .cancelButton {
    .icon {
      svg {
        height: 10px;
        width: 10px;

        g {
          fill: var(--theme-button-flat-text-color);
        }
      }
    }
  }

  .okButton {
    background-color: var(--theme-button-primary-background-color);
    margin-left: 11px;

    &:hover {
      background-color: var(--theme-button-primary-background-color-hover);
    }

    &:active {
      background-color: var(--theme-button-primary-background-color-active);
    }

    .icon {
      svg path {
        stroke: var(--theme-button-primary-text-color);
      }
    }
  }

  .submittingButton {
    &:hover {
      background-color: var(--theme-button-flat-background-color);
      cursor: default;
    }

    &:active {
      background-color: var(--theme-button-flat-background-color);
    }

    .icon {
      animation: spinner 1.5s linear;
      animation-iteration-count: infinite;

      svg g {
        stroke: var(--theme-button-flat-text-color);
      }
    }
  }

  @keyframes spinner {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes animateSavingResultLabel {
    0% {
      opacity: 0.5;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 0;
    }
  }

  .savingResultLabel {
    animation: animateSavingResultLabel 3s;
    color: var(--theme-input-right-floating-text-success-color);
    font-family: var(--font-regular);
    font-size: 14px;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 5px;
  }

  :global {
    .SimpleFormField_label {
      display: inline-block;
    }
  }
}

.errorMessage {
  @include error-message;
  margin-top: 20px;
  text-align: center;
}
